<title>首页 - {:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</title>
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">


<div class="container-fluid">
    <div class="row">

        <div class="col-md-6 col-xl-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
                          <i class="mdi mdi-account fs-4"></i>
                        </span>
                        <span class="fs-4 scroll-numbers">{$total['user']['today']}</span>
                    </div>
                    <div class="text-end">今日注册量</div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
                          <i class="mdi mdi-account fs-4"></i>
                        </span>
                        <span class="fs-4 scroll-numbers">{$total['user']['total']}</span>
                    </div>
                    <div class="text-end">用户总数</div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
                          <i class="mdi mdi-door fs-4"></i>
                        </span>
                        <span class="fs-4 scroll-numbers">{$total['room']['today']}</span>
                    </div>
                    <div class="text-end">今日房间数</div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-3">
            <div class="card bg-purple text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
                          <i class="mdi mdi-door fs-4"></i>
                        </span>
                        <span class="fs-4 scroll-numbers">{$total['room']['total']}</span>
                    </div>
                    <div class="text-end">房间总数</div>
                </div>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">每周用户</div>
                </div>
                <div class="card-body">
                    <canvas class="week-user"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">每周房间</div>
                </div>
                <div class="card-body">
                    <canvas class="week-room"></canvas>
                </div>
            </div>
        </div>

    </div>
    <div class="row">

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">每月用户</div>
                </div>
                <div class="card-body">
                    <canvas class="month-user"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">每月房间</div>
                </div>
                <div class="card-body">
                    <canvas class="month-room"></canvas>
                </div>
            </div>
        </div>

    </div>
    <div class="row">

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">年计用户数</div>
                </div>
                <div class="card-body">
                    <canvas class="year-user"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">年计房间数</div>
                </div>
                <div class="card-body">
                    <canvas class="year-room"></canvas>
                </div>
            </div>
        </div>

    </div>


</div>

<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/chart.min.js"></script>
<!-- 数字动态滚动增加效果 -->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/scroll-numbers.js"></script>
<!--引入chart插件js-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/main.min.js"></script>
<script type="text/javascript">
    let chartRawData = JSON.parse('{$chartRawData|raw|json_encode}');
    $(document).ready(function(e) {
        let chartData = [
            {
                dom: jQuery('.week-user')[0].getContext('2d'),
                chart: {
                    labels: chartRawData['labels']['week'],
                    datasets: [{
                        label: '注册用户',
                        data: chartRawData['data']['user']['week'],
                        borderWidth: 1,
                        borderColor: 'rgba(0, 0, 0, 0)',
                        backgroundColor: 'rgba(0, 123, 255,0.5)',
                        hoverBackgroundColor: "rgba(0, 123, 255, 0.7)",
                        hoverBorderColor: "rgba(0, 0, 0, 0)",
                    }]
                },
            },
            {
                dom: jQuery('.week-room')[0].getContext('2d'),
                chart: {
                    labels: chartRawData['labels']['week'],
                    datasets: [{
                        label: '房间数量',
                        data: chartRawData['data']['room']['week'],
                        borderWidth: 1,
                        borderColor: 'rgba(0, 0, 0, 0)',
                        backgroundColor: 'rgba(0, 123, 255,0.5)',
                        hoverBackgroundColor: "rgba(0, 123, 255, 0.7)",
                        hoverBorderColor: "rgba(0, 0, 0, 0)",
                    }]
                },
            },
            {
                dom: jQuery('.month-user')[0].getContext('2d'),
                chart: {
                    labels: chartRawData['labels']['month'],
                    datasets: [{
                        label: '注册用户',
                        data: chartRawData['data']['user']['month'],
                        borderWidth: 1,
                        borderColor: 'rgba(0, 0, 0, 0)',
                        backgroundColor: 'rgba(0, 123, 255,0.5)',
                        hoverBackgroundColor: "rgba(0, 123, 255, 0.7)",
                        hoverBorderColor: "rgba(0, 0, 0, 0)",
                    }]
                },
            },
            {
                dom: jQuery('.month-room')[0].getContext('2d'),
                chart: {
                    labels: chartRawData['labels']['month'],
                    datasets: [{
                        label: '房间数量',
                        data: chartRawData['data']['room']['month'],
                        borderWidth: 1,
                        borderColor: 'rgba(0, 0, 0, 0)',
                        backgroundColor: 'rgba(0, 123, 255,0.5)',
                        hoverBackgroundColor: "rgba(0, 123, 255, 0.7)",
                        hoverBorderColor: "rgba(0, 0, 0, 0)",
                    }]
                },
            },
            {
                dom: jQuery('.year-user')[0].getContext('2d'),
                chart: {
                    labels: chartRawData['labels']['year'],
                    datasets: [{
                        label: '注册用户',
                        data: chartRawData['data']['user']['year'],
                        borderWidth: 1,
                        borderColor: 'rgba(0, 0, 0, 0)',
                        backgroundColor: 'rgba(0, 123, 255,0.5)',
                        hoverBackgroundColor: "rgba(0, 123, 255, 0.7)",
                        hoverBorderColor: "rgba(0, 0, 0, 0)",
                    }]
                },
            },
            {
                dom: jQuery('.year-room')[0].getContext('2d'),
                chart: {
                    labels: chartRawData['labels']['year'],
                    datasets: [{
                        label: '房间数量',
                        data: chartRawData['data']['room']['year'],
                        borderWidth: 1,
                        borderColor: 'rgba(0, 0, 0, 0)',
                        backgroundColor: 'rgba(0, 123, 255,0.5)',
                        hoverBackgroundColor: "rgba(0, 123, 255, 0.7)",
                        hoverBorderColor: "rgba(0, 0, 0, 0)",
                    }]
                },
            },
        ];
        for (let key in chartData){
            new Chart(chartData[key]['dom'], {
                ...chartData[key]['options'],
                type: 'bar',
                data: chartData[key]['chart'],
            });
        }
    });
</script>
